<script setup lang="ts">
import { ref } from "vue";
import { useSystemSettingStore } from "@renderer/store/pinia/systemSetting";
import BaseIcon from "@renderer/assets/icon/BaseIcon.vue";
const systemSettingStore = useSystemSettingStore();
const colorSelectVisible = ref<boolean>(false)

const selectColor = color => {
  systemSettingStore.updateDefaultImgRenderSetting('percentRuleColor',color)
  colorSelectVisible.value = false
}
const showColorSelect = (_) => {
  colorSelectVisible.value = true
}



const selectMprLayout = val => {
  systemSettingStore.updateDefaultImgRenderSetting('mprLayout',val.key)
  console.log(val)
}

const handleUpdateImgShow = (k,v) => {
  systemSettingStore.updateDefaultImgRenderSetting(k,v)
}
</script>

<template>
  <v-row>
    <v-col class="font-weight-bold !ml-[10px] text-xl">图像显示</v-col>
  </v-row>

  <v-row align="center" dense>
    <v-col cols="3" class="!ml-[25px] text-lg">比例尺</v-col>

    <v-col cols="6" class="">
      <v-switch
        disabled
        :model-value="systemSettingStore.showPercentRule"
        :label="`${systemSettingStore.showPercentRule ? '显示': '不显示'}`"
        @update:model-value="val => handleUpdateImgShow('showPercentRule', val)"
        color="active"
        density="compact"
        inset
        hide-details
      ></v-switch>
    </v-col>
    <v-col cols="1" class="h-full"></v-col>
  </v-row>

  <v-row align="center" no-gutters>
    <v-col cols="3" class="!ml-[25px] text-lg">比例尺颜色</v-col>

    <v-col class="h-full items-center" cols="6">
      <v-text-field
        density="compact"
        hide-details
        :model-value="systemSettingStore.percentRuleColor"
        @click="showColorSelect"> </v-text-field>
    </v-col>
    <v-col cols="1" class="h-full">
      <v-btn  height="40" :color="systemSettingStore.percentRuleColor"></v-btn>
    </v-col>
  </v-row>

  <v-row  align="center" dense>
    <v-col cols="3"  class=" text-lg !ml-[25px]">MPR布局</v-col>

    <v-col cols="6" class=" flex items-center">
      <v-select
        :model-value="systemSettingStore.mprLayout"
        single-line
        hide-details
        density="compact"
        label="Select"
        :items="systemSettingStore.mprLayoutOptions"
        variant="outlined"
        @update:model-value="selectMprLayout"
      >
        <template v-slot:selection="{ item }">
            <base-icon :name="item.value.icon"></base-icon>
        </template>

        <template v-slot:item="{ props: itemProps, item }">
          <v-list-item
            v-bind="itemProps"
            :title="undefined"
          >
            <base-icon :name="item.value.icon"></base-icon>
          </v-list-item>
        </template>

      </v-select>
    </v-col>
    <v-col cols="1" class="h-full">
    </v-col>
  </v-row>

  <v-dialog v-model="colorSelectVisible"
            width="auto">
    <div >
      <v-color-picker :model-value="systemSettingStore.percentRuleColor"
                      @update:model-value="selectColor"></v-color-picker>
    </div>
  </v-dialog>
</template>

<style scoped>

</style>
